/**
 * Created by Ysssssss on 2021/4/14.
 */

import React, { PureComponent } from 'react'
import {Button} from "antd";
import CustomizeTableProvide, {CustomizeTable} from "@common/presentational/CustomizeTable";
import {withRouter} from "react-router-dom";
import {connect} from "react-redux";
import {getProductTypeList, deleteProductType} from "@sagas/productCenter";
import DoubleCheck from "@common/presentational/DoubleCheck";
import {CreateProductType, EditProductType} from "@components/productCenter/modal/ProductTypeEditModal";
import {getHistoryMatchParams} from "@utils/setUrlQuery";


@connect(({ productCenter }) => ({
    productTypeList: productCenter.productTypeList
}), {
    getProductTypeList,
    deleteProductType
})
@withRouter
class ProductTypeListPage extends PureComponent {
    constructor(props) {
        super(props);

        this.getTableInfo = this.getTableInfo.bind(this)
        this.showCreateModal = this.showCreateModal.bind(this)
        this.createProductTypeRef = React.createRef()
        this.editProductTypeRef = React.createRef()

        this.columns = [{
            title: '类目',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '关联商品数',
            dataIndex: 'count',
            key: 'count',
        }, {
            title: '操作',
            key: 'operation',
            width: '40%',
            render: (text, record) => (
                <div className="flex-vertical-center">
                    <div className="mgr-8 ft-hover" onClick={this.showEditModal.bind(this, {id: record.id, name: record.name, parentId: record.parentId})}>编辑</div>
                    <DoubleCheck onClick={this.deleteProductType.bind(this, record.id)}>
                        <div className="mgr-8 ft-hover">删除</div>
                    </DoubleCheck>
                </div>
            ),
        }]
    }

    getTableInfo () {
        const { productNature } = getHistoryMatchParams(this.props)
        this.props.getProductTypeList({ productNature })
    }

    showCreateModal () {
        this.createProductTypeRef.current?.show()
    }

    showEditModal ({ id, name, parentId }) {
        this.editProductTypeRef.current?.show({ id, name, parentId })
    }

    deleteProductType (id) {
        this.props.deleteProductType({ id }, () => {
            this.getTableInfo()
        })
    }

    setParentIdToSubs (list, parentId) {
        return list.map(item => ({
            ...item,
            parentId: parentId || 0,
            subs: item.subs && item.subs.length ? this.setParentIdToSubs(item.subs || [], item.id) : []
        }))
    }

    render () {
        const { productTypeList } = this.props
        const { productNature } = getHistoryMatchParams(this.props)
        return (
            <div className="table-scroll-container">
                <div className="table-params page-params flex-vertical-center mgb-16">
                    <Button type="primary" className="button-small" ghost onClick={this.showCreateModal}>新建</Button>
                </div>

                <CustomizeTableProvide tableKey="productTypeList" onChange={this.getTableInfo}>
                    <div className="table-list without-pagination">
                        <CustomizeTable
                            columns={this.columns}
                            dataSource={this.setParentIdToSubs(productTypeList || [])}
                            expandable={{
                                childrenColumnName: 'subs'
                            }}
                        />
                    </div>
                </CustomizeTableProvide>
                <CreateProductType ref={this.createProductTypeRef}
                                   productNature={productNature}
                                   callback={this.getTableInfo}
                />
                <EditProductType ref={this.editProductTypeRef}
                                 productNature={productNature}
                                 callback={this.getTableInfo}
                />
            </div>
        )
    }
}

export default ProductTypeListPage